<template>
    <div id="app">
        <div class="wrapContent">
            <!--左侧-->
            <!--<div class="FL" :class="{collapse:isCollapse}">-->
            <div class="FL" :class="isCollapse?'collapse':'notCollapse'">
                <!--logo点击伸缩侧边栏-->
                <div class="logo" @click="toggleExpand">
                    <img src="./assets/logo.png">
                </div>
                <!--二级栏目-->
                <MenuSlide></MenuSlide>
            </div>
            <!--右侧-->
            <div class="FR">
                <!--头部-->
                <MenuTop></MenuTop>
                <!--中间部分-切换路由-->
                <div class="wrapper-main">
                    <div class="layout-content">
                        <router-view></router-view>
                        <!--loading-->
                        <!--<loading v-if="fetchLoading == 'true'"></loading>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import MenuSlide from '@/components/slide.vue';
  import MenuTop from '@/components/top.vue';

  export default {
    name: 'app',
    data() {
      return {
        isCollapse: false,
        styleObject45: {
          width: '45px'
        },
        styleObject58: {
          width: '58px'
        },
      }
    },
    watch: {},
    mounted() {
    },
    computed: {
      side_width() {
        if (this.isCollapse) {
          return "64px"
        } else {
          return "240px"
        }
      },
    },
    methods: {
      toggleExpand() {
        this.isCollapse = !this.isCollapse;
      }
    },
    components: {
      MenuSlide,
      MenuTop
    }
  }
</script>

<style>
</style>
